<template>
	<view class="box">
		<view class="baise">
			
		</view>
		<view class="search">
			<text class="iconfont icon-houtui"></text>
			<input class="ipt" type="text" value="手机" />
		</view>
		<!-- 筛选1 -->
		<view class="sort">
			<view class="sortBox">
				<text class="zonghe">综合</text>
				<text class="xiaoliang">销量</text>
				<text class="jiage">价格</text>
			</view>
			<view class="iconfont icon-leimupinleifenleileibie chaidan"></view>
		</view>

		<!-- 筛选2 -->
		<view class="srot_1" style="position: sticky;top: 120rpx;">
			<scroll-view class="srot_Box" scroll-x>
				<text class="srot_item" v-for="(item,index) in srotList">{{item}}</text>
			</scroll-view>
			<text class="shaixuan" @click="show">筛选<text class="iconfont icon-shaixuan"></text></text>
		</view>

		<!-- 蒙版 -->
		<view class="mask" v-if="maskFlog" @click.stop="close">

		</view>
		<!-- 弹出筛选框 -->
		<view class="shaixuankuang" ref="shaixuankuang" :animation="animation">
			<!-- 地址 -->
			<view class="item address">
				<text class="title">配送至</text>
				<text class="text">{{address}}</text>
			</view>



			<!-- 类型 -->
			<view class="item typeBox" ref="typeBox">
				<view class="item1" v-for="(item,index) in types" :key="index" @click="change(index,'typeBox')">{{item}}</view>
			</view>



			<!-- 分类 -->
			<view class="item classification">
				<view class="title">
					分类
					<text>全部分类 <text class="iconfont icon-xiangyou"></text> </text>
				</view>
			</view>



			<!-- 价格 -->
			<view class="item price" ref="price">
				<view class="title">价格</view>
				<view class="content">
					<view class="inputbox">
						<input type="text" value="" placeholder="最低价" />
						—
						<input type="text" value="" placeholder="最高价" />
					</view>
				</view>
			</view>


			<!--  -->
			<view class="item" v-for="(items,indexs) in screeningList" :key="indexs">
				<view class="title">{{items.title}}</view>
				<view class="content" :ref="items.ref" v-if="items.value.length>9">
					<view class="item1" v-for="(item,index) in items.value" :key="index" v-if="index<8" @click="change1(index,items.ref)">{{item}}</view>
					<view class="item1 all">
						查看全部
					</view>
				</view>
				<view class="content" :ref="items.ref" v-else>
					<view class="item1" v-for="(item,index) in items.value" :key="index" @click="change1(index,items.ref)">{{item}}</view>
				</view>
			</view>

			<view class="operation" ref="operation" :animation="animation">
				<button type="default" size="mini" class="reset">重置</button>
				<button type="primary" size="mini" class="confirm">确认</button>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="shoppingList">
			<view class="item" v-for="(item,index) in shoppingList" :key="index" @click="jump">
				<view class="item_lift">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="item_right">
					<!-- 商品名称 -->
					<view class="title">{{item.good_name}}</view>
					<!-- 标签 -->
					<view class="label">
						<text>4GB运存</text>
						<text>64GB</text>
						<text>6.5英寸</text>
					</view>
					<!-- 价格 -->
					<view class="prices">￥<text>{{item.price}}</text></view>
					<text class="text">自营</text>
					<view class="comments"> 暂无评论 </view>
					<view class="shop"> 旗舰店 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				srotList: ["京东物流", "新品", "品牌", "CPU型号", "拍拍二手", "运行内存", "机身存储", "热点"],
				maskFlog: false,
				address: "四川成都双流华阳adadadadadad阿达大大大",
				types: ["京东物流", "有货优先", "货到付款", "金东国际", "PLUS专享", "促销商品"],
				screeningList: [{
						title: "品牌",
						ref: "brand",
						value: ["三枪(THREEGUN)", "红豆(Hodo)", "七匹狼(SEPTWOLVES)", "恒源祥(hengyuanxiang)", "浪莎", "莫代尔", "南极人(Nanjiren)", "小护士"]
					},
					{
						title: "颜色",
						ref: "color",
						value: ["黑色", "灰色", "白色", "粉色", "红色", "玫瑰红", "紫色", "蓝色", "绿色", "黄色", "橙色"]
					},
					{
						title: "尺码",
						ref: "size",
						value: ["80", "90", "100", "110", "120", "130", "140", "150", "160", "170", "180"]
					},
					{
						title: "厚度",
						ref: "thickness",
						value: ["常规", "中厚", "加厚", "薄款", "超薄"]
					}
				],
				shoppingList: [],
				animation:""
			}
		},
		mounted() {
			this.axioss();
			// document.removeEventListener('scroll',this.scroll())
			
			this.Animation = wx.createAnimation({
				duration:500,
			})
		},
		methods: {
			show() {
				
				this.Animation.right(0).step()
				this.animation = this.Animation.export()
				// this.$refs.shaixuankuang.$el.style.right = 0;
				// this.$refs.operation.$el.style.right = 0;
				this.maskFlog = true;
			},
			close() {
				this.Animation.right("-100%").step()
				this.animation = this.Animation.export()
				// this.$refs.shaixuankuang.$el.style.right = '';
				// this.$refs.operation.$el.style.right = '';
				this.maskFlog = false;
			},
			change(idx, names) {
				let list = this.$refs[names].$children;
				let flog = false
				// console.log(list[idx].$el.className)
				if (list[idx].$el.className.indexOf("change") == -1) {
					flog = true
				}
				for (let i = 0; i < list.length; i++) {
					list[i].$el.classList.remove("change");
				}
				if (flog) {
					list[idx].$el.classList.add("change")
				}
			},
			change1(idx, names) {
				let list = this.$refs[names][0].$children;
				let flog = false
				// console.log(list[idx].$el.className)
				if (list[idx].$el.className.indexOf("change") == -1) {
					flog = true
				}
				for (let i = 0; i < list.length; i++) {
					list[i].$el.classList.remove("change");
				}
				if (flog) {
					list[idx].$el.classList.add("change")
				}
			},
			axioss() {
				uni.request({
					url: 'http://api_devs.wanxikeji.cn/api/goodList',
					method: 'POST',
					data: {
						search: "手机"
					},
					success: (res) => {
						console.log(res.data.data.data)
						let arr = res.data.data.data;
						for (let i = 0; i < arr.length; i++) {
							this.shoppingList[i] = arr[i]
						}
						this.$forceUpdate()
					}
				})
			},
			jump(){
				console.log(123)
				wx.navigateTo({
					url:"../shoppingCart/shoppingCart"
				})
			}
		}
	}
</script>

<style scoped>
	.div {
		height: 30rpx;
	}

	.box {
		width: 720rpx;
		margin: 0 auto;
		padding-top: 120rpx;
	}
	.baise{
		width: 100%;
		height: 60rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 12;
	}
	.search {
		position: fixed;
		top: 60rpx;
		left: 0;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		padding: 10rpx;
		background-color: #FFFFFF;
		z-index: 11;
	}

	.icon-houtui {
		font-size: 40rpx;
		vertical-align: middle;
	}

	.ipt {
		display: inline-block;
		width: 400rpx;
		height: 40rpx;
		padding-left: 20rpx;
		margin-left: 30rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		background-color: #f2f2f2;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.sort {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #333;
		position: relative;
	}

	.sortBox {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
	}

	.zonghe {
		font-weight: 700;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.chaidan {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 16px;
	}

	.srot_Box {
		width: 600rpx;
		height: 60rpx;
		display: block;
		white-space: nowrap;
	}

	.srot_1 {
		background-color: #FFFFFF;
	}

	.srot_Box .srot_item {
		display: inline-block;
		padding: 5rpx 20rpx;
		background-color: #F5F5F5;
		margin: 0 20rpx;
		border-radius: 60rpx;
		font-size: 24rpx;
		
	}

	.shaixuan {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.mask {
		position: fixed;
		top: 60rpx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
		z-index: 10;
	}

	.shaixuankuang {
		position: fixed;
		top: 120rpx;
		right: -100%;
		width: 630rpx;
		height: 95.5%;
		font-size: 30rpx;
		border-radius: 20rpx 0 0 20rpx;
		background-color: #f5f5f5;
		transition: all 0.5s;
		z-index: 11;
		color: #333;
		overflow: auto;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.shaixuankuang>.item {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.shaixuankuang .address {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #FA7165;
	}

	.shaixuankuang .address .title {
		font-weight: 700;
		color: #000;
		margin-right: 20rpx;
	}

	.shaixuankuang .address .text {
		width: 500rpx;
		font-size: 24rpx;
	}

	.shaixuankuang .typeBox {
		width: 100%;
	}

	.shaixuankuang .item1 {
		display: inline-block;
		text-align: center;
		width: 30%;
		height: 60rpx;
		font-size: 28rpx;
		background-color: #f5f5f5;
		margin: 10rpx 2%;
		padding: 10rpx 5rpx;
		border: 1px solid #f5f5f5;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shaixuankuang view .item1:nth-of-type(3n+1) {
		margin-left: 0;
	}

	.shaixuankuang view .item1:nth-of-type(3n) {
		margin-right: 0;
	}

	.shaixuankuang view .change {
		border: 1px solid #FA2C19;
		background-color: #fdfdfd;
		color: #FA7165;
	}

	.shaixuankuang .title {
		margin: 10rpx 0;
		font-weight: 700;
	}

	.classification .title>text {
		float: right;
		font-size: 24rpx;
		color: #888;
	}

	.classification .title .icon-xiangyou {
		color: #000;
		margin-left: 10rpx;
	}

	.price .content .inputbox {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-around;
		color: #ccc;
	}

	.price .content input {
		display: inline-block;
		width: 45%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: #F5F5F5;
		border-radius: 60rpx;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.shaixuankuang .content {
		margin-bottom: 10rpx;
	}

	.shaixuankuang .all {
		background-color: #FFFFFF;
		border: 1px solid #dedede;
	}

	.shaixuankuang .operation {
		position: fixed;
		bottom: 0;
		right: -100%;
		width: 630rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		transition: all 0.5s;
	}

	.shaixuankuang .operation button {
		display: inline-block;
		width: 280rpx;
		height: 60rpx;
		border-radius: 60rpx;
		vertical-align: middle;
	}

	.shaixuankuang .operation .reset {
		border: 1px solid #888;
		margin-right: 20rpx;
	}

	.shaixuankuang .operation .confirm {
		background-color: #F93319;
	}
	.shoppingList .item{
		margin: 40rpx 0;
	}
	.shoppingList .item_lift{
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.shoppingList .item_lift image{
		width: 300rpx;
		height: 300rpx;
	}
	.shoppingList .item_right{
		display: inline-block;
		width: 400rpx;
		height: 300rpx;
		margin-left: 20rpx;
		vertical-align: top;
	}
	.shoppingList .item_right .title{
		font-size: 34rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.shoppingList .item_right .label{
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.shoppingList .label text{
		margin-right: 10rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: #F5F5F5;
	}
	.shoppingList .item_right .prices{
		margin-top: 20rpx;
		color: #F92B18;
		font-size: 26rpx;
	}
	.shoppingList .prices text{
		font-size: 36rpx;
	}
	.shoppingList .item_right .text{
		font-size: 24rpx;
		padding: 0 10rpx;
		background-color: #F42312;
		border-radius: 20rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}
	.shoppingList .item_right .comments{
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #888888;
	}
	.shoppingList .item_right .shop{
		margin-top: 0;
		font-size: 24rpx;
	}
</style>
